<template>
  <div>
    <a-form
      :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col :md="24" :sm="24" :xs="24">
          <div class="kd-solid">
            <div class="flex">
              <!-- 左侧-->
              <div class="flex1">
                <div class="flex align-center">
                  <div class="kd_left">图片</div>
                  <div class="kd_right flex align-center">
                    <a-image :width="30" :height="30" :src="form.thumb_url" />
                  </div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">原条码</div>
                  <div class="kd_right">{{ form.bar_code || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">金料类型</div>
                  <div class="kd_right">{{
                    form.gold_category_code_name || ''
                  }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">成色</div>
                  <div class="kd_right">{{ form.quality_code_name || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">宝石类型</div>
                  <div class="kd_right">{{ form.gem_category_name || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">品类</div>
                  <div class="kd_right">{{ form.classes_code_name || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">货品名称</div>
                  <div class="kd_right">{{ form.name || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left require">数量</div>
                  <div class="kd_right">{{ form.num || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">净金重</div>
                  <div class="kd_right">{{ form.gold_weight || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">货重</div>
                  <div class="kd_right">{{ form.piece_weight || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">标签价</div>
                  <div class="kd_right">{{ form.sticker_price || '' }}</div>
                </div>
              </div>
              <!-- 右侧 -->
              <div class="flex1">
                <div class="flex align-center">
                  <div class="kd_left">实售价</div>
                  <div class="kd_right">{{ form.real_amount || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">主石重量</div>
                  <div class="kd_right">{{ form.main_stone_weight || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">主石颜色</div>
                  <div class="kd_right">{{
                    form.main_stone_color_name || ''
                  }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">主石净度</div>
                  <div class="kd_right">{{
                    form.main_stone_neatness_name || ''
                  }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">主石切工</div>
                  <div class="kd_right">{{
                    form.main_stone_cut_name || ''
                  }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">主石数量</div>
                  <div class="kd_right">{{ form.main_stone_num || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">副石石重</div>
                  <div class="kd_right">{{ form.vice_stone_weight || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">副石数量</div>
                  <div class="kd_right">{{ form.vice_stone_num || '' }}</div>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">换购金价</div>
                  <div class="kd_right flex1">
                    <a-input
                      type="number"
                      class="kd_inp"
                      all-clear
                      placeholder="请输入"
                      v-model:value="form.exchange_gold_price"
                    />
                  </div>
                  <span class="kd_right_text">元</span>
                </div>
                <div class="flex align-center">
                  <div class="kd_left">换购工费</div>
                  <div class="kd_right flex1">
                    <a-input-group compact>
                      <a-select
                        style="width: 38%"
                        v-model:value="form.exchange_labour_type"
                      >
                        <a-select-option value="1">按克</a-select-option>
                        <a-select-option value="2">按件</a-select-option>
                      </a-select>
                      <a-input
                        type="number"
                        class="kd_inp"
                        all-clear
                        v-model:value="form.exchange_labour"
                        placeholder="请输入"
                        style="width: 60%"
                      />
                    </a-input-group>
                  </div>
                  <span class="kd_right_text">元</span>
                </div>
                <div class="flex align-center">
                  <div class="kd_left required">抵扣金额</div>
                  <div class="kd_right flex1">
                    <a-input
                      type="number"
                      class="kd_inp"
                      all-clear
                      placeholder="请输入"
                      v-model:value="form.deduct_amount"
                    />
                  </div>
                  <span class="kd_right_text">元</span>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :md="24" :sm="24" :xs="24">
          <div class="kd-solid">
            <div class="flex align-center">
              <div class="kd_left">单件备注</div>
              <div class="kd_right flex1">
                <a-input
                  type="text"
                  class="kd_inp"
                  all-clear
                  placeholder="请输入"
                  v-model:value="form.note"
                />
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted, watch } from 'vue';
  import { Modal, message, Form } from 'ant-design-vue';
  import dayjs from 'dayjs';
  import { uploadUrl } from '@/config/setting';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  import {
    get_new_exchange_buy,
    get_new_exchange_detail,
    new_exchange
  } from '@/api/order/order/jewelry_order';

  // 表格列配置
  const useForm = Form.useForm;

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    member_id: [Number, String],
    bar_code: String
  });

  const emit = defineEmits([
    'done',
    'update:visible',
    'get_been_order',
    'changeShow'
  ]);

  const loading = ref(false);
  const tableData = ref([]);

  const form = reactive({
    order_sn: '',
    goods_code: '',
    member_id: props.member_id,
    thumb: '',
    thumb_url: '',
    bar_code: '',
    gold_category_code: '',
    gold_category_code_name: '',
    subclass_code: '',
    subclass_code_name: '',
    quality_code: '',
    quality_code_name: '',
    gem_category_code: '',
    gem_category_name: '',
    classes_code: '',
    classes_code_name: '',
    name: '',
    num: '',
    gold_weight: '',
    piece_weight: '',
    sticker_price: '',
    real_amount: '',
    main_stone_weight: '',
    main_stone_color: '',
    main_stone_color_name: '',
    main_stone_neatness: '',
    main_stone_neatness_name: '',
    main_stone_cut: '',
    main_stone_cut_name: '',
    main_stone_num: '',
    vice_stone_weight: '',
    vice_stone_num: '',
    exchange_gold_price: '',
    exchange_labour_type: '1',
    exchange_labour: '',
    deduct_amount: '',
    note: ''
  });

  watch(
    () => [
      form.exchange_gold_price,
      form.exchange_labour_type,
      form.exchange_labour
    ],
    (newValue, oldValue) => {
      //抵扣金额=实售价-换购工费
      if (props.bar_code) {
        if (form.exchange_labour_type == 1) {
          //按克
          form.deduct_amount =
            Number(form.real_amount) -
            Number(form.gold_weight) * Number(form.exchange_labour);
        } else if (form.exchange_labour_type == 2) {
          //按件
          form.deduct_amount =
            Number(form.real_amount) - Number(form.exchange_labour);
        }
      }
    }
  );

  onMounted(() => {
    if (props.bar_code) {
      form.bar_code = props.bar_code;
      search();
    }
    get_new_exchange_buy({
      member_id: props.member_id
    })
      .then((res) => {
        tableData.value = res.data;
      })
      .catch((e) => {
        message.error(e);
      });
  });
  const search = () => {
    get_new_exchange_detail({
      member_id: props.member_id,
      bar_code: form.bar_code
    }).then((res) => {
      Object.keys(form).forEach((key) => {
        form[key] = res[key] ? res[key] : null;
      });
      form.exchange_gold_price = res.sales_gold_price;
      form.exchange_labour_type = '1';
      form.goods_code = '';
      form.order_sn = '';
    });
  };
  const getDetail = (val) => {
    Object.keys(form).forEach((key) => {
      form[key] = val[key] ? val[key] : null;
    });
    form.deduct_amount = val.discount_amount;
    form.piece_weight = val.detail?.piece_weight;
    form.exchange_labour_type = form.exchange_labour_type.toString();
  };
  const save = () => {
    new_exchange(form)
      .then((res) => {
        emit('get_been_order');
        emit('changeShow');
        reset();
        message.success(res.msg);
      })
      .catch((e) => {
        message.error(e);
      });
  };
  const reset = () => {
    Object.keys(form).forEach((key) => {
      if (key != 'member_id') {
        form[key] = null;
      }
    });
  };

  defineExpose({
    getDetail,
    save
  });
</script>
<style scoped></style>
